<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简易手机通讯录</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        h1 {
            text-align: center;
            color: #333;
        }
        .contact-form {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input[type="text"] {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        .button-group {
            display: flex;
            gap: 10px;
            margin-top: 20px;
        }
        button {
            padding: 8px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-weight: bold;
            flex: 1;
        }
        #addBtn {
            background-color: #4CAF50;
            color: white;
        }
        #searchBtn {
            background-color: #2196F3;
            color: white;
        }
        #deleteBtn {
            background-color: #f44336;
            color: white;
        }
        #resetBtn {
            background-color: #ff9800;
            color: white;
        }
        .contact-list {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        textarea {
            width: 100%;
            height: 200px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            resize: none;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <h1>简易手机通讯录</h1>

    <div class="contact-form">
        <div class="form-group">
            <label for="name">姓名:</label>
            <input type="text" id="name" placeholder="请输入姓名">
        </div>
        <div class="form-group">
            <label for="phone">电话:</label>
            <input type="text" id="phone" placeholder="请输入电话">
        </div>
        <div class="button-group">
            <button id="addBtn">添加</button>
            <button id="searchBtn">查询</button>
            <button id="deleteBtn">删除</button>
            <button id="resetBtn">重置</button>
        </div>
    </div>

    <div class="contact-list">
        <h2>通讯录列表</h2>
        <textarea id="contactDisplay" readonly></textarea>
    </div>

    <script>
        $(document).ready(function() {
            // 初始化通讯录（如果本地存储中没有）
            if (!localStorage.getItem('phoneBook')) {
                localStorage.setItem('phoneBook', JSON.stringify({}));
            }

            // 显示所有联系人
            displayAllContacts();

            // 添加联系人
            $('#addBtn').click(function() {
                const name = $('#name').val().trim();
                const phone = $('#phone').val().trim();

                if (!name || !phone) {
                    alert('姓名和电话不能为空！');
                    return;
                }

                // 验证电话号码格式（简单验证）
                if (!/^\d{7,15}$/.test(phone)) {
                    alert('请输入有效的电话号码（7-15位数字）');
                    return;
                }

                // 获取当前通讯录
                const phoneBook = JSON.parse(localStorage.getItem('phoneBook'));

                // 检查是否已存在同名联系人
                if (phoneBook.hasOwnProperty(name)) {
                    if (confirm('已存在同名联系人，是否覆盖？')) {
                        phoneBook[name] = phone;
                    } else {
                        return;
                    }
                } else {
                    phoneBook[name] = phone;
                }

                // 保存回本地存储
                localStorage.setItem('phoneBook', JSON.stringify(phoneBook));

                // 更新显示
                displayAllContacts();

                // 清空输入框
                $('#name').val('');
                $('#phone').val('');

                alert('联系人添加成功！');
            });

            // 查询联系人
            $('#searchBtn').click(function() {
                const name = $('#name').val().trim();

                if (!name) {
                    alert('请输入要查询的姓名！');
                    return;
                }

                const phoneBook = JSON.parse(localStorage.getItem('phoneBook'));

                if (phoneBook.hasOwnProperty(name)) {
                    $('#phone').val(phoneBook[name]);
                } else {
                    alert('未找到该联系人！');
                    $('#phone').val('');
                }
            });

            // 删除联系人
            $('#deleteBtn').click(function() {
                const name = $('#name').val().trim();

                if (!name) {
                    alert('请输入要删除的姓名！');
                    return;
                }

                const phoneBook = JSON.parse(localStorage.getItem('phoneBook'));

                if (phoneBook.hasOwnProperty(name)) {
                    if (confirm(`确定要删除联系人 "${name}" 吗？`)) {
                        delete phoneBook[name];
                        localStorage.setItem('phoneBook', JSON.stringify(phoneBook));
                        displayAllContacts();
                        $('#name').val('');
                        $('#phone').val('');
                        alert('联系人删除成功！');
                    }
                } else {
                    alert('未找到该联系人！');
                }
            });

            // 重置表单
            $('#resetBtn').click(function() {
                $('#name').val('');
                $('#phone').val('');
            });

            // 显示所有联系人
            function displayAllContacts() {
                const phoneBook = JSON.parse(localStorage.getItem('phoneBook'));
                let displayText = '';

                // 按姓名排序
                const sortedNames = Object.keys(phoneBook).sort();

                if (sortedNames.length === 0) {
                    displayText = '通讯录为空';
                } else {
                    for (const name of sortedNames) {
                        displayText += `${name}: ${phoneBook[name]}\n`;
                    }
                }

                $('#contactDisplay').val(displayText);
            }
        });
    </script>
</body>
</html>